<template>
    <div class="workstation">
      <!-- 餐台网格布局 -->
      <div class="table-grid">
        <div v-for="table in tables" :key="table.tableId" 
             :class="['table-card', statusColor[table.tableStatus]]"
             @click="handleTableClick(table)">
          <div class="table-header">
            <span class="table-id">{{ table.tableId }}</span>
            <el-tag size="mini">{{ table.tableType }}</el-tag>
          </div>
          <div class="table-body">
            <p class="status-text">{{ table.tableStatus }}</p>
            <p class="capacity">{{ table.capacity }}人桌</p>
            <p class="amount">¥{{ table.currentAmount?.toFixed(2) || '0.00' }}</p>
          </div>
        </div>
      </div>
  
      <!-- 就餐人数输入弹窗 -->
      <el-dialog v-model="showPeopleDialog" width="30%" title="请输入就餐人数">
        <div class="number-pad-dialog">
          <div class="display">{{ peopleInput || '点击数字输入' }}</div>
          <div class="keyboard">
            <div v-for="n in 9" :key="n" class="num-btn" @click="inputNumber(n)">{{ n }}</div>
            <div class="num-btn" @click="inputNumber(0)">0</div>
            <div class="num-btn" @click="peopleInput = ''">×</div>
          </div>
          <el-button type="primary" 
                     :disabled="!peopleInput" 
                     @click="confirmPeopleNumber"
                     class="confirm-btn">
            开台并点餐
          </el-button>
        </div>
      </el-dialog>
  
      <!-- 订单详情弹窗 -->
      <el-dialog v-model="showOrderDetail" width="60%" title="订单详情">
        <div v-if="currentOrder" class="order-detail-dialog">
          <div class="order-header">
            <span>订单号：{{ currentOrder.orderId }}</span>
            <el-tag :type="orderStatusColor[currentOrder.orderStatus]">
              {{ currentOrder.orderStatus }}
            </el-tag>
          </div>
          
          <div class="order-body">
            <div class="dish-list">
              <div v-for="(item, index) in currentOrder.dishes" 
                   :key="index" class="dish-item">
                <span>{{ item.dish.dishName }}</span>
                <span>×{{ item.quantity }}</span>
                <span>¥{{ (item.dish.dishPrice * item.quantity).toFixed(2) }}</span>
              </div>
            </div>
            
            <div class="payment-info">
              <p>支付方式：{{ currentOrder.paymentMethod }}</p>
              <p>实收金额：¥{{ currentOrder.totalAmount.toFixed(2) }}</p>
              <p>支付时间：{{ currentOrder.paymentTime }}</p>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </template>

<script setup>
import { ref } from 'vue'

// 状态管理
const restaurantStore = useRestaurantStore()
const { tables } = storeToRefs(restaurantStore)

// const statusColor = {
//   '空闲': 'status-idle',
//   '用餐中': 'status-dining',
//   '待结账': 'status-pending',
//   '结账中': 'status-checking'
// }

// const orderStatusColor = {
//   '进行中': '',
//   '已完成': 'success',
//   '已取消': 'danger'
// }

// // 对话框状态
// const showPeopleDialog = ref(false)
// const showOrderDetail = ref(false)
// const peopleInput = ref('')
// const currentTable = ref(null)
</script>